<template>
  <div>
    <TableComponent v-loading="isLoading" :assetList="tableDataList" :tableColumns="tableColumns"
      element-loading-text="加载中...">
      <template #operation="{ row }">
        <span>cdn文件下发</span>
        <el-switch
          v-model="row.status"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          @change="switchChange(row,$event)"
        />
        <el-button :disabled="!row.status" size="small"
            type="text" @click="openFileDialog(row)">文件选择
        </el-button>
      </template>
    </TableComponent>
    <SelectFile ref="SelectFileRef" @submitSelectFile="getSelectFile"></SelectFile>
  </div>
</template>
<script setup>
import { reactive, ref, onMounted, watch, defineProps } from "vue";
import { debounce } from 'lodash';
import TableComponent from '@/components/TableComponent.vue';
import { tableColumns } from '@/constant/cdnConfiguration.js';
import { queryStrategyBizListById }  from '@/api/cdnConfigurationApi.js';
import SelectFile from "./SelectFile.vue";

const props = defineProps(['requireData'])
const isLoading = ref(false)
const tableDataList = ref([])
const SelectFileRef = ref(null)
const triggerCdnConfig = ref([])
const emit = defineEmits();
watch(props.requireData,(newVal) => {
  let req = {
    strategyId: props.requireData.strategyIds[0],
    groupId: props.requireData.groupIds[0],
  }
  getStrategyBizList(req)
})
// 查询trigger或trigger组对应的业务及子业务列表
const getStrategyBizList = debounce((req) => {
  isLoading.value = true
  queryStrategyBizListById(req).then(res => {
    if (res.data.code === 200) {
      tableDataList.value = res.data.data;
      triggerCdnConfig.value = res.data.data
      triggerCdnConfig.value.forEach((item) => {
          item.status = true
      })
      isLoading.value = false
      emit('checkCDNConfig', triggerCdnConfig.value )
    }
  })
  
},500)
const openFileDialog = (row) => {
  SelectFileRef.value.switchVisible(row, 'triggerPage')
}
const getSelectFile = (bizId,fileId) => {
  triggerCdnConfig.value.forEach((item) => {
    if(item.bizId === bizId){
      item.fileId = fileId
      item.status = true
    }
  })
  emit('checkCDNConfig', triggerCdnConfig.value )
}
const switchChange = (row,val) => {
  triggerCdnConfig.value.forEach((item) => {
    if(item.bizId === row.bizId){
      item.status = val
    }
  })
  emit('checkCDNConfig', triggerCdnConfig.value )
}

</script>